<template>
  <div class="form">
    <header>电商平台实时监控系统</header>
    <main>
      <div class="left">
        <div class="top" style="">
          <select v-model="k">
            <option value="map">地区销量趋势</option>
            <option value="seller">商家销量趋势</option>
            <option value="commodity">商品销量趋势</option>
          </select>
          <Chart1 :k="k"></Chart1>
        </div>
        <div class="bottom">
          <p style="color: #fff; text-align: left; padding-left: 20px;padding-top: 10px;">商家销售统计</p>
          <Chart2></Chart2>
        </div>
      </div>
      <div class="mid">
        <div class="top" style="height: 68%;">
          <h2 style="color: #fff; text-align: left; padding-left: 30px;padding-top: 10px;">商家分布</h2>
          <Chart3></Chart3>
        </div>
        <div class="bottom" style="height: 30%;">
          <h2 style="color: #fff; text-align: left; padding-left: 30px;padding-top: 10px;">地区销售排行</h2>
          <Chart4></Chart4>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <h4 style="color: #fff;padding-left: 30px;padding-top: 10px;">热销商品的占比</h4>
          <Chart5></Chart5>
        </div>
        <div class=" bottom">
          <h4 style="color: #fff;padding-left: 30px;padding-top: 10px;">库存和销量分析</h4>
          <Chart6></Chart6>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import Chart1 from '@/components/Chart1.vue';
import Chart2 from '@/components/Chart2.vue';
import Chart3 from '@/components/Chart3.vue';
import Chart4 from '@/components/Chart4.vue';
import Chart5 from '@/components/Chart5.vue';
import Chart6 from '@/components/Chart6.vue';
import { ref } from 'vue';
const k = ref('map')
</script>

<style scoped lang="scss">
.form {
  background-color: #161522;
  height: 100%;
  display: flex;
  flex-direction: column;

  header {
    height: 60px;
    font-size: 20px;
    color: #fff;
    line-height: 60px;
    text-align: center;
  }

  main {
    display: flex;
    flex: 1;
    justify-content: space-around;

    >div {
      padding: 20px 0;
    }

    .left {
      // background-color: red;
      width: 28%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .mid {
      // background-color: blue;
      width: 40%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .right {
      // background-color: red;
      width: 28%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .top {
        height: 60%;
      }

      .bottom {
        height: 38%;
      }
    }

    .top {
      height: 65%;
      background-color: #222733;
      border-radius: 16px;
    }

    .bottom {
      height: 33%;
      background-color: #222733;
      border-radius: 16px;

    }
  }

}
</style>